<template>
    <el-dialog v-model="show" class="visitor-info-main" title="访问记录" width="700">
        <div class="visitor-info-base">
            <div class="base-cell">
                <el-image
                    class="base-cell-img"
                    teleported="true"
                    :src="
                        visitInfo.headimgurl ||
                        'https://img-scrm-dev.keyid.cn/keyid-scrm-server/avatar/cust_default.png'
                    "
                    fit="cover">
                </el-image>
                <div class="base-cell-nickname">
                    <span>{{ visitInfo.nickname || '未知客户' }}</span>
                    <span>访问次数：{{ visitInfo.visit_num }}</span>
                </div>
            </div>
            <!-- <div class="base-cell">
                <div>访问次数：</div>
                <div class="base-cell-right">{{ visitInfo.visit_num }}</div>
            </div> -->
            <div class="base-cell base-cell-time">
                <div>首次访问时间：</div>
                <div class="base-cell-right">{{ visitInfo.fist_visit_time }}</div>
            </div>
            <!-- <div class="tags-list">
                <el-tag
                    v-for="item in visitInfo.tag_list"
                    :key="item"
                    size="small"
                    class="tags-list-item"
                    type="warning">
                    {{ item.name }}</el-tag
                >
            </div> -->
        </div>
        <div class="visitor-info-table">
            <!-- <el-divider style="margin: 14px 0 0" />
            <div class="export-btn">
                <el-button @click="onExportExcel" :disabled="!tableData.length">导出</el-button>
            </div> -->
            <el-table :data="tableData" style="width: 100%" class="table-box" max-height="400">
                <!-- <el-table-column label="客户信息" width="300" fixed>
                    <template #default="scope">
                        <div class="avatar-box">
                            <el-image
                                class="avatar"
                                teleported="true"
                                :src="
                                    scope.row.headimgurl ||
                                    'https://img-scrm-dev.keyid.cn/keyid-scrm-server/avatar/cust_default.png'
                                "
                                fit="cover">
                            </el-image>
                            <el-tooltip effect="dark" :content="scope.row.nickname" placement="top-start">
                                <div class="name">{{ scope.row.nickname || '未知客户' }}</div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column> -->
                <el-table-column label="访问时间" prop="created_at"> </el-table-column>
                <!-- <el-table-column label="操作" width="130px" fixed="right">
                    <template #default="scope">
                        <div class="btn-box">
                            <el-button v-if="scope.row.cust_id != 0" size="small" @click="toDetail(scope.row)"
                                >客户详情</el-button
                            >
                            <span v-else>--</span>
                        </div>
                    </template>
                </el-table-column> -->
            </el-table>
            <ZWPagination ref="PaginationRef" @submit="pageChangeFun" />
        </div>
    </el-dialog>
    <!-- <div class="visitor-info-main">
    <el-drawer v-model="show" title="访客信息" size="40%">

    </el-drawer>

  </div> -->
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue';
import { useRouter } from 'vue-router';
import { showCollectVisitDetail, exportCollectVisitDetail } from '@/api/highMaterial/collectionTable';
import { useStore } from '@/store';
import { downFile } from '@/utils/utils';
import ZWPagination from '@/components/ZWPagination.vue';

const router = useRouter();
const store = useStore();

const emit = defineEmits(['update:modelValue']);

interface Props {
    modelValue: any;
    options: any;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => false,
    options: {}
});

const show = computed({
    get() {
        return props.modelValue;
    },
    set(val: any) {
        emit('update:modelValue', val);
    }
});

const PaginationRef = ref<any>(null);

const visitInfo = ref<any>({});
const tableData = ref<any>([]);
const formData = reactive<any>({
    id: props.options.id,
    wx_openid: props.options.wx_openid,
    page: 1,
    page_size: 15
});

watch(
    () => props.modelValue,
    val => {
        if (val) {
            (formData.id = props.options.id), (formData.wx_openid = props.options.wx_openid), initData();
        }
    }
);

const onExportExcel = async () => {
    const res = await exportCollectVisitDetail(formData);
    downFile(res.url, res.name);
};

const toDetail = (val: any) => {
    router.push({ path: '/customer/manage/list/detail', query: { id: val.cust_id, type: val.type } });
};

// 当前分页改变
const pageChangeFun = (val: any) => {
    formData.page = val.page;
    formData.page_size = val.page_size;
    initData();
};

const initData = async () => {
    const res = await showCollectVisitDetail(formData);
    visitInfo.value = res.vist_info || {};
    tableData.value = res.data || [];
    store.dispatch('pageTotal', res.total);
};
</script>
<style lang="less" scoped>
.visitor-info-main {
    .visitor-info-base {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .base-cell {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #33302d;
            .base-cell-img {
                margin-right: 8px;
                width: 40px;
                height: 40px;
                min-width: 40px;
                border-radius: 4px;
            }
            .base-cell-nickname {
                min-height: 40px;
                margin-right: 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                word-wrap: break-word;
                white-space: break-spaces;
                word-break: break-all;
                span:first-of-type {
                    color: #33302d;
                    margin-bottom: 10px;
                }
                span:last-of-type {
                    color: #969696;
                    font-size: 13px;
                }
            }
            .base-cell-right {
                color: #33302d;
            }
        }
        .base-cell-time {
            min-width: 250px;
            text-align: right;
        }
    }
    .visitor-info-table {
        .export-btn {
            padding: 16px 0;
            text-align: right;
        }
        .avatar-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .avatar {
                width: 50px;
                height: 50px;
                border-radius: 4px;
            }
            .image-slot {
                .el-icon {
                    font-size: 50px;
                }
            }
            .name {
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;
                max-width: 90px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                margin: 0 10px;
            }
            .sex {
                width: 18px;
                height: 18px;
            }
        }
    }
    .table-box {
        border: 0;
        margin-bottom: 15px;
        :deep(.el-table__inner-wrapper .el-table__header-wrapper .el-table__header thead tr th) {
            border-bottom: 0;
            background-color: #f9f9f9;
        }
    }
}
</style>
